<!-- 账户绑定 -->
<template>
    <div>
        <FormProcess step="3" :registerStatus="this.userStatus" v-if="this.userStatus.accountBinding != 2"/>
        <FormTitle title="账户绑定"/>
        <div class="form-box account-form-box">
            <el-form :model="form" ref="form" :rules="rules" label-width="130px" class="demo-ruleForm edit-form-box">
                <el-row class="form-conent-box">
                    <el-col :span="24">
                        <div class="approve-int-box">
                            <el-form-item label="企业名称：">
                                <span>{{this.userInfo.enterprise_name}}</span>
                            </el-form-item>
                            <el-form-item label="企业银行账号：" prop="account_number">
                                <el-input class="approve-int" v-model="form.account_number" placeholder="请输入企业银行账号" :disabled="this.userStatus.accountBinding == 1"></el-input>
                            </el-form-item>
                            <el-form-item label="银行行号：" class="account-num" prop="cnaps_code">
                                <el-input class="approve-int" @input="getBankNmae()" v-model="form.cnaps_code" placeholder="请输入银行行号" :disabled="this.userStatus.accountBinding == 1"></el-input><el-button type="primary" class="find-bank-num" @click="findBank()">查询行号</el-button>
                            </el-form-item>
                            <el-form-item label="银行名称：">
                                <span>{{form.bank_name}}</span>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <div class="submit-btn approve-submit-btn">
                            <el-button type="info" size="small" @click="exitApprove()">取消</el-button>
                            <el-button type="primary" size="small" @click="saveAccount()" v-if="this.userStatus.accountBinding != 1">提交</el-button>
                            <el-button type="primary" size="small" :disabled="this.userStatus.accountBinding == 1" v-if="this.userStatus.accountBinding == 1">待鉴权</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <WarmPrompt class="warm-prompy" warContent="仅需出票可绑定任一银行对公账户用于交易提现，建议背书出票的对公户与资金入账的对公户一致；若需收票则必须绑定兴业银行对公户用于电票的付款和签收。"/>
    </div>
</template>

<script lang="ts">
    import { Vue, Component, Prop } from 'vue-property-decorator';
    import FormProcess from '@component/common/FormProcess.vue';
    import FormTitle from '@component/common/FormTitle.vue';
    import FormImages from '@component/common/FormImages.vue';
    import { mapState, mapMutations, mapGetters, mapActions } from 'vuex';
    import { Getter, Action } from 'vuex-class';
    import WarmPrompt from '@component/common/WarmPrompt.vue';
    @Component({
        components: {
            FormProcess,
            FormTitle,
            FormImages,
            WarmPrompt
        },
        computed: {
            ...mapState([
                "userStatus"
            ]),
            ...mapGetters([
                'userInfo'
            ])
        },
        methods: {
            ...mapActions([
                "getPolicy",
                "getStatus",
            ])
        }
    })
    export default class ApproveAccount extends Vue {
        @Prop() userRegisterStatus;
        customerInfo: any;
        form = {
            account_number: '',
            cnaps_code: '',
            account_type_code: '501',
            bank_name: '',
            enterprise_name: ''
        }
        rules = {
            account_number: [
                {required: true, message: '请输入企业银行账号', trigger: 'blur'}
            ],
            cnaps_code: [
                {required: true, message: '请输入银行行号', trigger: 'blur'}
            ]
        }
        // 跳转到查询行号页面
        findBank () {
            window.open("/tools.html#/querybank");
        }
        // 根据行号查询行名
        async getBankNmae () {
            if(!this.form.cnaps_code){
                this.form.bank_name = ''
                return false
            }
            let res = await this.$http.get(`banks/bank/getCnapsInfo/${this.form.cnaps_code}`)
            if (res.status == 200){
                this.form.bank_name = res.data.bank_branch_name;
            }
        }
        // 根据企业id查询账户信息
        async getAccount () {
            if (this.userStatus.accountBinding != 0){
                let res = await this.$http.get(`paying/xingyeapi/account/getAccount/${this.userInfo.enterprise_id}`)
                if(res.status == 200){
                    this.form = res.data.acct_list[0];
                    this.form.enterprise_name = res.data.enterprise_name;
                }
            }
        }
        // 点击提交保存账户
        saveAccount () {
            // 发送保存请求
            let accountForm = {
                account_number: this.form.account_number,
                account_person: this.userInfo.enterprise_name,
                cnaps_code: this.form.cnaps_code
            }
            this.$refs.form.validate((valid) => {
                if(valid){
                    this.accountPost(accountForm);
                }
            })
        }
        async accountPost (accountForm) {
            let res = await this.$http.post('paying/xingyeapi/account',accountForm)
            if(res.status == 200){
                this.$alert('账户提交成功。请等待鉴权，退出重新登录才能发布电票！','提醒',{
                    confirmButtonText: '我知道了',
                    customClass: 'custom-message-box',
                    center: true,
                    callback: action => {
                        // 退出登录
                        this.logout();
                    }
                })
            }
        }
        async logout () {
            let res = await this.$http.post('customers/customerLogout')
            if(res.status == 200){
                localStorage.removeItem('userInfo');
                location.href = "user.html";
            }
        }
        created () {
            let promise = this.getStatus();
            let self = this;
            promise.then(resolve => {
                this.getPolicy();
                this.getAccount();
            })
        }
        // 退出认证
        exitApprove () {
            let backUrl = /back=.+$/.exec(location.hash);
            location.href = backUrl && backUrl.length == 1 ? backUrl[0].split('=')[1] : "/trade.html";
        }
        mounted () {

        }
    }
</script>

<style lang="scss" scoped>
    .account-form-box {
        margin-top: 30px;
    }
    .find-bank-num {
        width: 86px;
        height: $height-int-register;
        vertical-align: middle;
        background: $__color-bg-unimportance;
        color: $__color-primary;
        border: 1px solid $__color-primary;
        padding: 0;
    }
</style>
<style lang="scss">
    .account-num {
        .el-input {
            width: 68%;
        }
    }
</style>